<template>
  <div>
    <el-card style="width:100%">
      <p>料号信息</p>
      <el-button type="primary" style="margin:15px 0;" @click="addInfo">新增料号</el-button>
      <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="500"
        >
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column prop="id" label="id" align="center"></el-table-column>
          <el-table-column prop="productId" label="产品id" align="center"></el-table-column>
          <el-table-column prop="productCode" label="物料" align="center"></el-table-column>
          <el-table-column prop="image" label="产品图片" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image" min-width="70" height="70" />
            </template>
          </el-table-column>
          <el-table-column prop="productNumber" label="料号" align="center"></el-table-column>
          <el-table-column prop="price" label="物料单价(人民币/含税)" align="center"></el-table-column>
          <el-table-column prop="stock" label="库存" align="center"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="250">
            <template slot-scope="scope">
              <el-row>
                <el-button
                  type="primary"
                  size="mini"
                  @click="modifyInfo(scope.row)"
                  icon="el-icon-edit"
                ></el-button>
                <el-button type="primary" size="mini" @click="checkDetail(scope.row,index)">查看详情</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { LIAOHAO_LIST, LIAOHAO_ADD, LIAOHAO_UPDATE } from "@/utils/api";
export default {
  data() {
    return {
      productCode: "",
      tableData: [
        {
          // id: 0,
          // image: "",
          // manufacturerCode: "12312",
          // manufacturer: "2335451",
          // storeInfo: "BMW",
          // pack: "sfds423g23g",
          // specsBook: "10",
          // stock: "吸塑",
          // pricestocks: "xxx",
          // productArea: "100"
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      id: 0
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getPoductList();
  },
  methods: {
    addInfo() {
      this.$router.push({
        path: "addSeries",
        query: {
          pid:''+this.id,
          handler: "edit",
          product:{
            productCode: this.productCode,
            produceName: "",
            price: "",
            stock: "",
            isShow: "0"
          }}
      });
    },
    getPoductList() {
      LIAOHAO_LIST({
        productId: this.id,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.dataList;
        this.total = res.data.count;
        if(this.total>0){
          this.id=this.tableData[0].productId
          console.log('++++>'+this.id)
          this.productCode=this.tableData[0].productCode
          console.log('+++productCode+>'+this.productCode)
        }else{
          this.$message.error('无此物料数据')
        }
      });
    },
    checkDetail(row,index) {
       this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "check",
        }
      });
    },
    modifyInfo(row) {
      // this.$router.push({
      //     path:'handleProduct',
      //     query:{
      //         data:row
      //     }
      // })
      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "edit",
          pid:this.id
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log('每页条'+val);
      this.pageSize=val
      this.getPoductList()
    },
    handleCurrentChange(val) {
      console.log('当前页:'+val);
      this.currentPage=val
      this.getPoductList()
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>